import React from 'react';
import { Stepper } from 'web-component';

export default () => {
  return (
    <>
      <Stepper disabled />

      <Stepper inputReadOnly />

      <Stepper style={{ width: '120px' }} defaultValue={10000} step={10000} />

      <Stepper
        onFocus={() => {
          console.log('获得焦点');
        }}
        onBlur={() => {
          console.log('失去焦点');
        }}
      />

      <Stepper
        allowEmpty={true}
        min={10}
        max={20}
        onChange={(value) => {
          console.log(value);
        }}
      />

      <Stepper
        style={{
          '--border': '1px solid #f5f5f5',
          '--border-inner': 'none',
          '--height': '36px',
          '--input-width': '70px',
          '--input-background-color': 'var(--adm-color-background)',
          '--active-border': '1px solid #1677ff',
        }}
        defaultValue={10000}
        step={10000}
      />
    </>
  );
};
